<template>
  <div class="info-validation">
    <!-- 校验概览 -->
    <div class="validation-summary">
      <div class="summary-card">
        <div class="summary-icon" :style="{ background: getSummaryColor() }">
          <i :class="getSummaryIcon()"></i>
        </div>
        <div class="summary-info">
          <div class="summary-title">{{ validationStatus }}</div>
          <div class="summary-desc">{{ validationDesc }}</div>
        </div>
      </div>
      
      <div class="summary-stats">
        <div class="stat-item">
          <span class="stat-value">{{ validationResults.length }}</span>
          <span class="stat-label">校验项</span>
        </div>
        <div class="stat-item">
          <span class="stat-value passed">{{ passedCount }}</span>
          <span class="stat-label">通过</span>
        </div>
        <div class="stat-item">
          <span class="stat-value failed">{{ failedCount }}</span>
          <span class="stat-label">失败</span>
        </div>
        <div class="stat-item">
          <span class="stat-value warning">{{ warningCount }}</span>
          <span class="stat-label">警告</span>
        </div>
      </div>
    </div>

    <!-- 校验项列表 -->
    <div class="validation-section">
      <div class="section-header">
        <i class="el-icon-s-order"></i>
        <span>校验结果详情</span>
      </div>
      
      <div class="validation-list">
        <div 
          v-for="item in validationResults" 
          :key="item.id"
          class="validation-item"
          :class="item.status"
        >
          <div class="item-header">
            <div class="item-status-icon">
              <i :class="getStatusIcon(item.status)"></i>
            </div>
            <div class="item-title">{{ item.title }}</div>
          </div>
          
          <div class="item-content">
            <div class="item-message">{{ item.message }}</div>
            
            <div v-if="item.details" class="item-details">
              <div class="detail-label">详细信息：</div>
              <div class="detail-content">{{ item.details }}</div>
            </div>
            
            <div v-if="item.suggestion" class="item-suggestion">
              <i class="el-icon-info"></i>
              <span>{{ item.suggestion }}</span>
            </div>
          </div>
          
          <div v-if="item.status === 'error'" class="item-action">
            <el-button 
              type="text" 
              size="small"
              @click="handleFix(item)"
            >
              去修正
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据完整性检查 -->
    <div class="validation-section">
      <div class="section-header">
        <i class="el-icon-s-data"></i>
        <span>数据完整性检查</span>
      </div>
      
      <div class="completeness-list">
        <div 
          v-for="field in dataCompleteness" 
          :key="field.name"
          class="completeness-item"
        >
          <div class="field-info">
            <span class="field-name">{{ field.label }}</span>
            <span class="field-status" :class="field.filled ? 'filled' : 'empty'">
              {{ field.filled ? '已填写' : '未填写' }}
            </span>
          </div>
          <div class="field-progress">
            <div 
              class="progress-bar" 
              :class="field.filled ? 'filled' : 'empty'"
              :style="{ width: field.filled ? '100%' : '0%' }"
            ></div>
          </div>
        </div>
      </div>
      
      <div class="completeness-summary">
        <div class="summary-progress">
          <div class="progress-info">
            <span>数据完整度</span>
            <span class="progress-percent">{{ completenessPercent }}%</span>
          </div>
          <div class="progress-track">
            <div 
              class="progress-fill" 
              :style="{ width: completenessPercent + '%' }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 逻辑关系检查 -->
    <div class="validation-section">
      <div class="section-header">
        <i class="el-icon-connection"></i>
        <span>逻辑关系检查</span>
      </div>
      
      <div class="logic-list">
        <div 
          v-for="logic in logicChecks" 
          :key="logic.id"
          class="logic-item"
          :class="logic.passed ? 'passed' : 'failed'"
        >
          <div class="logic-icon">
            <i :class="logic.passed ? 'el-icon-circle-check' : 'el-icon-warning'"></i>
          </div>
          <div class="logic-content">
            <div class="logic-title">{{ logic.title }}</div>
            <div class="logic-desc">{{ logic.description }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        type="default" 
        size="large"
        icon="el-icon-refresh"
        @click="handleRevalidate"
        style="flex: 1;"
      >
        重新校验
      </el-button>
      <el-button 
        v-if="allPassed"
        type="success" 
        size="large"
        icon="el-icon-check"
        @click="handleConfirm"
        style="flex: 2;"
      >
        校验通过，继续
      </el-button>
      <el-button 
        v-else
        type="warning" 
        size="large"
        icon="el-icon-warning"
        disabled
        style="flex: 2;"
      >
        存在错误，请修正
      </el-button>
    </div>
  </div>
</template>

<script>
import { validateEventReport } from './service';

export default {
  name: 'InfoValidation',
  
  data() {
    return {
      validationResults: [
        {
          id: 1,
          title: '基本信息完整性',
          status: 'success',
          message: '事件名称、类型、时间、地点等基本信息完整',
          details: null,
          suggestion: null
        },
        {
          id: 2,
          title: '人员数据逻辑性',
          status: 'success',
          message: '累计病例数 = 新增病例数 + 既往病例数，数据逻辑正确',
          details: null,
          suggestion: null
        },
        {
          id: 3,
          title: '死亡人数合理性',
          status: 'warning',
          message: '新增死亡人数占比偏高',
          details: '新增死亡5人，当前在治20人，死亡率25%',
          suggestion: '建议核实死亡人数数据的准确性'
        },
        {
          id: 4,
          title: '密接人数关系',
          status: 'success',
          message: '密接和次密接人数关系合理',
          details: '密切接触者150人，次密接450人，比例约1:3',
          suggestion: null
        },
        {
          id: 5,
          title: '时间顺序合理性',
          status: 'success',
          message: '事件发生时间、报告时间、处理时间顺序合理',
          details: null,
          suggestion: null
        },
        {
          id: 6,
          title: '措施描述完整性',
          status: 'warning',
          message: '防控措施描述较简单',
          details: '已采取措施字数少于100字',
          suggestion: '建议详细描述已采取的具体防控措施'
        },
        {
          id: 7,
          title: '报告人信息完整性',
          status: 'success',
          message: '报告人姓名、职务、联系方式等信息完整',
          details: null,
          suggestion: null
        },
        {
          id: 8,
          title: '数据格式规范性',
          status: 'success',
          message: '手机号码、日期等数据格式符合规范',
          details: null,
          suggestion: null
        }
      ],
      
      dataCompleteness: [
        { name: 'eventName', label: '事件名称', filled: true },
        { name: 'eventType', label: '事件类型', filled: true },
        { name: 'occurTime', label: '发生时间', filled: true },
        { name: 'location', label: '发生地点', filled: true },
        { name: 'caseData', label: '病例数据', filled: true },
        { name: 'eventDescription', label: '事件描述', filled: true },
        { name: 'measures', label: '防控措施', filled: true },
        { name: 'reporterInfo', label: '报告人信息', filled: true },
        { name: 'attachments', label: '附件资料', filled: false }
      ],
      
      logicChecks: [
        {
          id: 1,
          title: '累计病例 ≥ 在治人数 + 治愈人数 + 死亡人数',
          description: '检查通过：100 ≥ 20 + 75 + 5',
          passed: true
        },
        {
          id: 2,
          title: '新增病例数 ≤ 涉及人数',
          description: '检查通过：25 ≤ 200',
          passed: true
        },
        {
          id: 3,
          title: '报告时间 ≥ 发生时间',
          description: '检查通过：2024-11-06 ≥ 2024-11-01',
          passed: true
        },
        {
          id: 4,
          title: '处理更新时间 ≥ 初次报告时间',
          description: '检查通过：时间顺序合理',
          passed: true
        }
      ]
    };
  },

  computed: {
    passedCount() {
      return this.validationResults.filter(item => item.status === 'success').length;
    },
    
    failedCount() {
      return this.validationResults.filter(item => item.status === 'error').length;
    },
    
    warningCount() {
      return this.validationResults.filter(item => item.status === 'warning').length;
    },
    
    allPassed() {
      return this.failedCount === 0;
    },
    
    validationStatus() {
      if (this.failedCount > 0) {
        return '校验未通过';
      } else if (this.warningCount > 0) {
        return '校验通过（有警告）';
      } else {
        return '校验完全通过';
      }
    },
    
    validationDesc() {
      if (this.failedCount > 0) {
        return `发现 ${this.failedCount} 个错误需要修正`;
      } else if (this.warningCount > 0) {
        return `存在 ${this.warningCount} 个警告项，建议优化`;
      } else {
        return '所有校验项均已通过，数据完整准确';
      }
    },
    
    completenessPercent() {
      const filled = this.dataCompleteness.filter(f => f.filled).length;
      return Math.round((filled / this.dataCompleteness.length) * 100);
    }
  },

  methods: {
    getSummaryColor() {
      if (this.failedCount > 0) return '#F56C6C';
      if (this.warningCount > 0) return '#E6A23C';
      return '#67C23A';
    },
    
    getSummaryIcon() {
      if (this.failedCount > 0) return 'el-icon-close';
      if (this.warningCount > 0) return 'el-icon-warning';
      return 'el-icon-circle-check';
    },
    
    getStatusIcon(status) {
      const iconMap = {
        'success': 'el-icon-circle-check',
        'error': 'el-icon-circle-close',
        'warning': 'el-icon-warning'
      };
      return iconMap[status] || 'el-icon-info';
    },
    
    handleFix(item) {
      this.$message.info(`正在跳转到修正 ${item.title}`);
    },
    
    handleRevalidate() {
      const loading = this.$loading({
        lock: true,
        text: '正在重新校验...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      validateEventReport()
        .then(() => {
          loading.close();
          this.$notify({
            title: '✅ 校验完成',
            message: '续报信息校验已完成',
            type: 'success',
            duration: 2000,
            position: 'top-right',
            offset: 60
          });
        })
        .catch(error => {
          loading.close();
          this.$message.error(error.message || '校验失败');
        });
    },
    
    handleConfirm() {
      this.$notify({
        title: '✅ 校验通过',
        message: '续报信息校验通过，可以进行下一步操作',
        type: 'success',
        duration: 2000,
        position: 'top-right',
        offset: 60
      });
    }
  }
};
</script>

<style scoped>
.info-validation {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 校验概览 */
.validation-summary {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.summary-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  margin-bottom: 15px;
}

.summary-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.summary-icon i {
  font-size: 32px;
  color: white;
}

.summary-info {
  flex: 1;
}

.summary-title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.summary-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-value.passed {
  color: #67C23A;
}

.stat-value.failed {
  color: #F56C6C;
}

.stat-value.warning {
  color: #E6A23C;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #999;
}

/* 校验项列表 */
.validation-section {
  background: white;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.section-header i {
  font-size: 20px;
  margin-right: 8px;
}

.validation-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.validation-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  border-left: 4px solid #ddd;
}

.validation-item.success {
  border-left-color: #67C23A;
}

.validation-item.error {
  border-left-color: #F56C6C;
}

.validation-item.warning {
  border-left-color: #E6A23C;
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.item-status-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.validation-item.success .item-status-icon {
  background: #f0f9ff;
  color: #67C23A;
}

.validation-item.error .item-status-icon {
  background: #fef0f0;
  color: #F56C6C;
}

.validation-item.warning .item-status-icon {
  background: #fdf6ec;
  color: #E6A23C;
}

.item-status-icon i {
  font-size: 16px;
}

.item-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.item-content {
  margin-left: 34px;
}

.item-message {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.item-details {
  background: white;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.detail-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.detail-content {
  font-size: 13px;
  color: #666;
}

.item-suggestion {
  display: flex;
  align-items: flex-start;
  padding: 8px 10px;
  background: #f0f9ff;
  border-radius: 6px;
  font-size: 12px;
  color: #409EFF;
}

.item-suggestion i {
  margin-right: 6px;
  margin-top: 1px;
  flex-shrink: 0;
}

.item-action {
  margin-left: 34px;
  margin-top: 10px;
}

/* 数据完整性 */
.completeness-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.completeness-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.field-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.field-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.field-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.field-status.filled {
  background: #f0f9ff;
  color: #67C23A;
}

.field-status.empty {
  background: #fef0f0;
  color: #F56C6C;
}

.field-progress {
  height: 6px;
  background: #e4e7ed;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  transition: width 0.3s;
}

.progress-bar.filled {
  background: #67C23A;
}

.progress-bar.empty {
  background: #e4e7ed;
}

.completeness-summary {
  padding: 15px;
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
}

.summary-progress {
  padding: 15px;
  background: white;
  border-radius: 8px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.progress-percent {
  font-size: 18px;
  color: #409EFF;
}

.progress-track {
  height: 10px;
  background: #e4e7ed;
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #409EFF 0%, #67C23A 100%);
  transition: width 0.3s;
  border-radius: 5px;
}

/* 逻辑检查 */
.logic-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logic-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.logic-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.logic-item.passed .logic-icon {
  background: #f0f9ff;
  color: #67C23A;
}

.logic-item.failed .logic-icon {
  background: #fef0f0;
  color: #F56C6C;
}

.logic-icon i {
  font-size: 18px;
}

.logic-content {
  flex: 1;
}

.logic-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.logic-desc {
  font-size: 12px;
  color: #999;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  gap: 10px;
}

.action-buttons .el-button {
  border-radius: 6px;
  font-size: 15px;
  height: 46px;
  font-weight: 500;
}
</style>

